<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日报管理</title>
    <link rel="stylesheet" href="../css/sakura.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <style type="text/css">

    </style>
</head>
<body>
<div class="container add">
        <form action="/toAdd" method="post" @submit.prevent="submit($event)">
            <h4 class="text-center">研发部日志</h4>
            <div>
                <table>
                    <thead>
                    <tr class="text-center">
                        <th colspan="2">项目名称</th>
                        <th colspan="2">工作内容</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template v-for="(proj, index) in projects">
                        <tr class="project">
                            <td class="delete" :class="index==0?'no_border_right':''">
                                <button @click="deleteProject(index)" v-show="index != 0">X</button>
                            </td>
                            <td class="width-200" :class="index==0?'no_border_left':''">
                                <select v-model="proj.projectName">
                                    <option value="易兑外币交易系统">易兑外币交易系统</option>
                                </select>
                            </td>

                            <td colspan="2" class="width-400">
                        <textarea name="" v-model="proj.content" rows="7"
                                  placeholder="工作内容不应该超过1024个字，超出后下方统计文字会变红！"></textarea>
                            </td>
                            <td>
                        <textarea name="" rows="7" v-model="proj.mark"
                                  placeholder="备注内容不应该超过1024个字，如果超过，请再次添加项目"></textarea>
                            </td>
                        </tr>
                    </template>

                    <tr class="text-center manager">
                        <td colspan="2" class="bold">主管意见</td>
                        <td colspan="3"><input type="text"/></td>
                    </tr>
                    <tr class="text-center">
                        <td class="bold" colspan="2">记录人</td>
                        <td class="person"><input type="text" v-model="userName"/></td>
                        <td colspan="1" class="bold" style="width:150px;">记录时间</td>
                        <td class="date">
                            <div>
                                <input class="laydate-icon" v-model="startDate" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" placeholder="请输入开始时间"/>
                                <button @click="handleDate('startDate')">前</button>
                                <button @click="handleDate('startDate')">今</button>
                                <button @click="handleDate('startDate')">后</button>
                            </div>
                            <div>
                                <input class="laydate-icon" v-model="endDate" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" placeholder="请输入结束时间"/>
                                <button @click="handleDate('endDate')">前</button>
                                <button @click="handleDate('endDate')">今</button>
                                <button @click="handleDate('endDate')">后</button>
                            </div>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="pannel">
                <div>
                    <button @click="addProject">添加项目</button>
                    <button type="submit" class="save">保存</button>
                </div>
                <template v-for="(p,index) in projects">
                    <div class="hint">
                        <span class="bold title">项目【{{p.id}}】工作内容字数：</span><span v-text="p.content.length"
                                                                                 :class="p.content.length>countSize ? 'color-red':''"></span>
                        <span class="divide"></span>
                        <span class="bold title">项目【{{p.id}}】备注内容字数：</span><span v-text="p.mark.length"
                                                                                 :class="p.mark.length>countSize ? 'color-red':''"></span>
                    </div>
                </template>
                <div>
                    <span class="bold title ">当前【项目】数量：</span><span v-text="projectNums"></span>
                </div>
            </div>
        </form>
</div>


<script src="../js/vue.min.js"></script>
<script src="../js/laydate/laydate.js"></script>
<script type="text/javascript">
    new Vue({
        el: '.container',
        data: {
            countSize: 1024,
            projectNums: 0,
            projects: [],
            userName: '宋昱承',
            startDate: '',
            endDate: ''
        },
        computed: {
            contentWords: function () {
                return this.content.length
            },
            markWords: function () {
                return this.mark.length
            }
        },
        created: function () {
            this.addProject();
            this.handleDate();
        },
        methods: {
            addProject: function () {
                this.projectNums += 1;
                this.projects.push({
                    id: this.projectNums,
                    content: '',
                    mark: '',
                    projectName: '请选择项目'
                })
            },
            deleteProject: function (index) {
                this.projectNums -= 1;
                this.projects.splice(index, 1);
            },
            handleDate: function (date) {
                if (!date) {
                    this.startDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' : new Date().getMonth()) + new Date().getMonth() + '-' + new Date().getDate() + ' 09:00';
                    this.endDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' : new Date().getMonth()) + new Date().getMonth() + '-' + new Date().getDate() + ' 17:30';
                }
                if (date === 'startDate') {
                    this.startDate = '';
                    this.startDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' : new Date().getMonth()) + new Date().getMonth() + '-' + new Date().getDate() + ' 09:00';
                }
                if (date === 'endDate') {
                    this.endDate = '';
                    this.endDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' : new Date().getMonth()) + new Date().getMonth() + '-' + new Date().getDate() + ' 17:30';
                }
            },
            submit: function (event) {
//                event.target.submit() // 验证通过提交表单
                for (var i in this.projects) {
                    console.log(this.projects[i])
                }
            }
        }
    })
</script>
</body>
</html>